<template>
	<view class="ai-page">
		<!-- 上半部分蓝色背景 -->
		<view class="top-section">
		</view>
		<!-- 下半部分白色圆角内容区，固定底部 -->
		<view class="bottom-section-fixed">
			<scroll-view class="content-scroll">
				<view class="content">
					<view class="media-row" v-for="(item, index) in mediaList" :key="index">
						<view class="art-img">
							<img class="art-img-real" :src="item.imageUrl"
								@click="onArtImgClick(item.imageUrl, item.description)" />
						</view>
						<view class="media-card">
							<video class="media-video-real" :src="item.videoUrl" controls
								:show-fullscreen-btn="true" :enable-progress-gesture="true"
								:show-play-btn="true" :show-center-play-btn="true"
								:enable-play-gesture="true" :vslide-gesture="true"
								:vslide-gesture-in-fullscreen="true" :show-screen-lock-button="true"
								:enable-auto-rotation="true" :show-mute-btn="true"
								object-fit="contain" :initial-time="0" direction="90">
							</video>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 可拖动圆形悬浮按钮 -->
			<view class="fab-draggable" :style="fabStyle" @touchstart="onFabTouchStart" @touchmove="onFabTouchMove"
				@touchend="onFabTouchEnd" @click="onFabClick">
				<u-icon name="edit-pen" color="#fff" size="20" style="margin-bottom: 4px;"></u-icon>
				<text class="fab-text">AI创作</text>
		</view>
		<!-- 弹窗 -->
		<view v-if="showImageModal" class="image-modal-mask" @click="closeImageModal">
			<view class="image-modal-content" @click.stop>
				<view class="modal-image-box">
					<img class="modal-image" :src="modalImageUrl" />
				</view>
				<view class="modal-desc">
					{{ modalDesc }}
				</view>
			</view>
		</view>
		<tabBar></tabBar>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// page:"",
				mediaList: [{
						imageUrl: 'http://1.94.233.8:19000/education-bucket/0bb1ac28-d924-46e5-8466-0f264fdfad4f.jpg',
						videoUrl: 'http://1.94.233.8:19000/education-bucket/6143c5c7-861f-4b52-aac7-d57e9265fef5.mp4',
						description: '帮我生成一个视频：帮我生成一个视频'
					},
					{
						imageUrl: 'http://1.94.233.8:19000/education-bucket/b33aa240-e536-442d-a01e-73d32f812d44.jpg',
						videoUrl: 'http://1.94.233.8:19000/education-bucket/shaiduhausd.mp4',
						description: '这是第二张图片的描述'
					}
				],
				fabX: 0,
				fabY: 0,
				dragging: false,
				touchOffsetX: 0,
				touchOffsetY: 0,
				windowWidth: 0,
				windowHeight: 0,
				fabSize: 50,
				showImageModal: false,
				modalImageUrl: '',
				modalDesc: '',
			}
		},
		computed: {
			fabStyle() {
				return `position: fixed; left: ${this.fabX}px; top: ${this.fabY}px; z-index: 100;`;
			}
		},
		// onShow() {
		// 	this.page = " pages/ai-show/ai-show";
		// },
		mounted() {
			const sys = uni.getSystemInfoSync();
			this.windowWidth = sys.windowWidth;
			this.windowHeight = sys.windowHeight;
			this.fabX = this.windowWidth - this.fabSize;
			this.fabY = this.windowHeight - this.fabSize - 80;
			this.fabSizePx = this.fabSize;
		},
		methods: {
			onFabTouchStart(e) {
				this.dragging = true;
				const touch = e.touches[0];
				this.touchOffsetX = touch.clientX - this.fabX;
				this.touchOffsetY = touch.clientY - this.fabY;
			},
			onFabTouchMove(e) {
				if (!this.dragging) return;
				const touch = e.touches[0];
				let x = touch.clientX - this.touchOffsetX;
				let y = touch.clientY - this.touchOffsetY;
				// 限制在屏幕内
				const minX = 0;
				const maxX = this.windowWidth - this.fabSize;
				const minY = 0;
				const maxY = this.windowHeight - this.fabSize;
				x = Math.max(minX, Math.min(maxX, x));
				y = Math.max(minY, Math.min(maxY, y));
				this.fabX = x;
				this.fabY = y;
				e.stopPropagation && e.stopPropagation();
				e.preventDefault && e.preventDefault();
			},
			onFabTouchEnd() {
				this.dragging = false;
				// 吸边逻辑
				const distLeft = this.fabX;
				const distRight = this.windowWidth - this.fabSize - this.fabX;
				if (distRight <= distLeft) {
					this.fabX = this.windowWidth - this.fabSize;
				} else {
					this.fabX = 0;
				}
			},
			onFabClick() {
				// 跳转到ai-edit页面
				uni.navigateTo({
					url: '/pages/ai-chat/ai-chat'
				});
			},
			onArtImgClick(url, desc = '这是图片的描述') {
				this.modalImageUrl = url;
				this.modalDesc = desc;
				this.showImageModal = true;
			},
			closeImageModal() {
				this.showImageModal = false;
			},
		}
	}
</script>

<style scoped>
	.ai-page {
		min-height: 100vh;
		background: #2563eb;
		position: relative;
	}

	.top-section {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		height: 10px;
		background: #2563eb;
		z-index: 20;
	}

	.bottom-section-fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		box-shadow: 0 -8px 32px rgba(37, 99, 235, 0.06);
		min-height: 85vh;
		max-height: 90vh;
		display: flex;
		flex-direction: column;
		z-index: 10;
	}

	.content-scroll {
		flex: 1;
		height: 100%;
		overflow-y: auto;
	}

	.content {
		/* margin-top: 2px; */
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}

	.media-row {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
		margin-top: 15px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.art-img {
		flex: 1.2;
		height: 132px;
		border-radius: 12px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 0;
	}

	.media-card {
		flex: 1.2;
		height: 132px;
		border-radius: 12px;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}

	.arrow-static-img {
		width: 20px;
		height: 20px;
		display: block;
	}

	.media-video-real {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 12px;
		display: block;
		background: #222;
	}

	.fab-draggable {
		width: 50px;
		height: 50px;
		background: #2563eb;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
		color: #fff;
		font-size: 15px;
		user-select: none;
		z-index: 100;
	}

	.fab-text {
		font-size: 15px;
		margin-top: 2px;
	}

	.image-modal-mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.55);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-modal-content {
		background: #fff;
		border-radius: 12px;
		padding: 24px 18px 18px 18px;
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 90vw;
		max-height: 80vh;
	}

	.modal-thumb {
		width: 60px;
		height: 60px;
		object-fit: cover;
		border-radius: 8px;
		margin-bottom: 18px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}

	.modal-image-box {
		width: 320px;
		height: 320px;
		background: #f7f7f7;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	}

	.modal-image {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		border-radius: 8px;
	}

	.modal-desc {
		margin-top: 18px;
		font-size: 16px;
		color: #333;
		text-align: center;
		max-width: 90vw;
		word-break: break-all;
	}
</style>